<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网盘资源共享社区</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --dark-color: #34495e;
            --light-color: #ecf0f1;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: var(--dark-color);
            color: white;
            padding: 0.8rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        .user-menu {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        /* 主内容区样式 */
        .main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 280px;
            background-color: white;
            border-right: 1px solid #ddd;
            display: flex;
            flex-direction: column;
        }
        
        .search-box {
            padding: 1rem;
            border-bottom: 1px solid #eee;
        }
        
        .search-input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .group-list {
            overflow-y: auto;
            flex: 1;
        }
        
        .group-item {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .group-item:hover {
            background-color: #f9f9f9;
        }
        
        .group-item.active {
            background-color: #e3f2fd;
            border-left: 4px solid var(--primary-color);
        }
        
        /* 聊天区域样式 */
        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .chat-header {
            padding: 1rem;
            background-color: white;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .messages-container {
            flex: 1;
            padding: 1rem;
            overflow-y: auto;
            background-color: #fafafa;
        }
        
        .message {
            margin-bottom: 1rem;
            max-width: 80%;
        }
        
        .message.sent {
            margin-left: auto;
        }
        
        .message-content {
            padding: 0.8rem;
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .message.sent .message-content {
            background-color: #dcf8c6;
        }
        
        .resource-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 0.5rem;
            background-color: #f9f9f9;
        }
        
        .resource-pending {
            opacity: 0.7;
            border-left: 4px solid var(--warning-color);
        }
        
        .resource-approved {
            border-left: 4px solid var(--secondary-color);
        }
        
        .resource-rejected {
            border-left: 4px solid var(--danger-color);
        }
        
        .input-area {
            padding: 1rem;
            background-color: white;
            border-top: 1px solid #ddd;
            display: flex;
            gap: 0.5rem;
        }
        
        .message-input {
            flex: 1;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
        }
        
        .send-button {
            padding: 0.8rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            width: 400px;
            max-width: 90%;
        }
        
        .modal-header {
            margin-bottom: 1.5rem;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }
        
        .btn {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-secondary {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="logo">网盘资源共享社区</div>
        <div class="user-menu">
            <span id="username">未登录</span>
            <button id="loginBtn" class="btn btn-primary">登录/注册</button>
            <button id="createGroupBtn" class="btn btn-primary" style="display: none;">创建群组</button>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索群组...">
            </div>
            <div class="group-list">
                <!-- 群组列表将通过JS动态生成 -->
            </div>
        </div>
        
        <!-- 聊天区域 -->
        <div class="chat-container">
            <div class="chat-header">
                <h2 id="currentGroupName">请选择或加入一个群组</h2>
                <div id="groupActions" style="display: none;">
                    <button id="inviteBtn" class="btn btn-primary">邀请成员</button>
                    <button id="shareResourceBtn" class="btn btn-primary">分享资源</button>
                </div>
            </div>
            
            <div class="messages-container">
                <!-- 消息将通过JS动态生成 -->
                <div class="welcome-message">
                    <h3>欢迎使用网盘资源共享社区</h3>
                    <p>请从左侧选择或搜索加入一个群组开始聊天和分享资源</p>
                </div>
            </div>
            
            <div class="input-area">
                <input type="text" class="message-input" placeholder="输入消息或搜索资源..." disabled>
                <button class="send-button" disabled>发送</button>
            </div>
        </div>
    </div>
    
    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户登录</h2>
            </div>
            <div class="form-group">
                <label class="form-label">用户名</label>
                <input type="text" class="form-input" id="loginUsername">
            </div>
            <div class="form-group">
                <label class="form-label">密码</label>
                <input type="password" class="form-input" id="loginPassword">
            </div>
            <div class="form-actions">
                <button class="btn btn-secondary" id="showRegisterBtn">注册新账户</button>
                <button class="btn btn-primary" id="doLoginBtn">登录</button>
            </div>
        </div>
    </div>
    
    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户注册</h2>
            </div>
            <div class="form-group">
                <label class="form-label">用户名</label>
                <input type="text" class="form-input" id="registerUsername">
            </div>
            <div class="form-group">
                <label class="form-label">密码</label>
                <input type="password" class="form-input" id="registerPassword">
            </div>
            <div class="form-group">
                <label class="form-label">确认密码</label>
                <input type="password" class="form-input" id="registerPasswordConfirm">
            </div>
            <div class="form-actions">
                <button class="btn btn-secondary" id="showLoginBtn">返回登录</button>
                <button class="btn btn-primary" id="doRegisterBtn">注册</button>
            </div>
        </div>
    </div>
    
    <!-- 创建群组模态框 -->
    <div id="createGroupModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>创建新群组</h2>
            </div>
            <div class="form-group">
                <label class="form-label">群组名称</label>
                <input type="text" class="form-input" id="groupName">
            </div>
            <div class="form-group">
                <label class="form-label">群组描述</label>
                <textarea class="form-input" id="groupDescription"></textarea>
            </div>
            <div class="form-actions">
                <button class="btn btn-secondary" id="cancelCreateGroup">取消</button>
                <button class="btn btn-primary" id="doCreateGroup">创建</button>
            </div>
        </div>
    </div>
    
    <!-- 分享资源模态框 -->
    <div id="shareResourceModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>分享资源</h2>
            </div>
            <div class="form-group">
                <label class="form-label">资源类型</label>
                <select class="form-input" id="resourceType">
                    <option value="baidu">百度网盘</option>
                    <option value="ali">阿里云盘</option>
                    <option value="other">其他网盘</option>
                    <option value="text">文字</option>
                    <option value="image">图片</option>
                    <option value="audio">音频</option>
                    <option value="video">视频</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">资源链接/内容</label>
                <textarea class="form-input" id="resourceContent" placeholder="请输入资源链接或内容"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">资源描述</label>
                <textarea class="form-input" id="resourceDescription"></textarea>
            </div>
            <div class="form-actions">
                <button class="btn btn-secondary" id="cancelShareResource">取消</button>
                <button class="btn btn-primary" id="doShareResource">分享</button>
            </div>
        </div>
    </div>

    <script>
        // 伪代码：这里只展示前端逻辑框架，实际开发需要与后端API交互
        
        // 全局状态
        let currentUser = null;
        let currentGroup = null;
        let groups = [];
        
        // DOM元素
        const loginBtn = document.getElementById('loginBtn');
        const createGroupBtn = document.getElementById('createGroupBtn');
        const loginModal = document.getElementById('loginModal');
        const registerModal = document.getElementById('registerModal');
        const createGroupModal = document.getElementById('createGroupModal');
        const shareResourceModal = document.getElementById('shareResourceModal');
        
        // 事件监听
        loginBtn.addEventListener('click', showLoginModal);
        createGroupBtn.addEventListener('click', showCreateGroupModal);
        
        // 显示登录模态框
        function showLoginModal() {
            loginModal.style.display = 'flex';
        }
        
        // 显示注册模态框
        function showRegisterModal() {
            registerModal.style.display = 'flex';
            loginModal.style.display = 'none';
        }
        
        // 显示创建群组模态框
        function showCreateGroupModal() {
            createGroupModal.style.display = 'flex';
        }
        
        // 显示分享资源模态框
        function showShareResourceModal() {
            shareResourceModal.style.display = 'flex';
        }
        
        // 登录功能
        async function login(username, password) {
            // 伪代码：实际开发中这里应该调用后端API
            console.log('登录:', username, password);
            
            // 模拟登录成功
            currentUser = { username, id: 'user123' };
            updateUIAfterLogin();
            hideModals();
        }
        
        // 注册功能
        async function register(username, password) {
            // 伪代码：实际开发中这里应该调用后端API
            console.log('注册:', username, password);
            
            // 模拟注册成功并自动登录
            currentUser = { username, id: 'user123' };
            updateUIAfterLogin();
            hideModals();
        }
        
        // 创建群组
        async function createGroup(name, description) {
            // 伪代码：实际开发中这里应该调用后端API
            console.log('创建群组:', name, description);
            
            // 模拟创建成功
            const newGroup = { id: 'group123', name, description, creator: currentUser.id };
            groups.push(newGroup);
            hideModals();
            renderGroupList();
        }
        
        // 分享资源
        async function shareResource(type, content, description) {
            // 伪代码：实际开发中这里应该调用后端API
            console.log('分享资源:', type, content, description);
            
            // 模拟分享成功
            hideModals();
            // 刷新消息列表
        }
        
        // 更新登录后的UI
        function updateUIAfterLogin() {
            document.getElementById('username').textContent = currentUser.username;
            document.getElementById('loginBtn').textContent = '退出';
            document.getElementById('createGroupBtn').style.display = 'block';
            
            // 切换登录按钮功能为退出
            loginBtn.removeEventListener('click', showLoginModal);
            loginBtn.addEventListener('click', logout);
            
            // 加载用户群组列表
            loadUserGroups();
        }
        
        // 退出登录
        function logout() {
            currentUser = null;
            document.getElementById('username').textContent = '未登录';
            document.getElementById('loginBtn').textContent = '登录/注册';
            document.getElementById('createGroupBtn').style.display = 'none';
            
            // 切换退出按钮功能为登录
            loginBtn.removeEventListener('click', logout);
            loginBtn.addEventListener('click', showLoginModal);
            
            // 清空群组列表和消息
            groups = [];
            renderGroupList();
            clearMessages();
        }
        
        // 加载用户群组
        async function loadUserGroups() {
            // 伪代码：实际开发中这里应该调用后端API获取用户加入的群组
            console.log('加载用户群组');
            
            // 模拟数据
            groups = [
                { id: 'group1', name: '前端开发资源群', unread: 3 },
                { id: 'group2', name: '设计素材分享', unread: 0 },
                { id: 'group3', name: '学习资料交流', unread: 7 }
            ];
            
            renderGroupList();
        }
        
        // 渲染群组列表
        function renderGroupList() {
            const groupList = document.querySelector('.group-list');
            groupList.innerHTML = '';
            
            groups.forEach(group => {
                const groupItem = document.createElement('div');
                groupItem.className = 'group-item';
                if (currentGroup && currentGroup.id === group.id) {
                    groupItem.classList.add('active');
                }
                groupItem.innerHTML = `
                    <h3>${group.name}</h3>
                    ${group.unread > 0 ? `<span class="unread-badge">${group.unread}</span>` : ''}
                `;
                groupItem.addEventListener('click', () => selectGroup(group));
                groupList.appendChild(groupItem);
            });
        }
        
        // 选择群组
        function selectGroup(group) {
            currentGroup = group;
            renderGroupList();
            document.getElementById('currentGroupName').textContent = group.name;
            document.getElementById('groupActions').style.display = 'block';
            
            // 启用输入框
            document.querySelector('.message-input').disabled = false;
            document.querySelector('.send-button').disabled = false;
            
            // 加载群组消息
            loadGroupMessages(group.id);
        }
        
        // 加载群组消息
        async function loadGroupMessages(groupId) {
            // 伪代码：实际开发中这里应该调用后端API获取群组消息
            console.log('加载群组消息:', groupId);
            
            // 模拟数据
            const messages = [
                {
                    id: 'msg1',
                    sender: '用户1',
                    content: '大家好，欢迎加入本群组！',
                    timestamp: new Date(Date.now() - 3600000),
                    type: 'text'
                },
                {
                    id: 'msg2',
                    sender: '用户2',
                    content: 'https://pan.baidu.com/s/example',
                    description: '前端开发教程合集',
                    timestamp: new Date(Date.now() - 1800000),
                    type: 'baidu',
                    status: 'approved'
                },
                {
                    id: 'msg3',
                    sender: '用户3',
                    content: '这个资源太棒了！',
                    timestamp: new Date(Date.now() - 600000),
                    type: 'text'
                }
            ];
            
            renderMessages(messages);
        }
        
        // 渲染消息
        function renderMessages(messages) {
            const messagesContainer = document.querySelector('.messages-container');
            messagesContainer.innerHTML = '';
            
            messages.forEach(msg => {
                const messageEl = document.createElement('div');
                messageEl.className = `message ${msg.sender === currentUser.username ? 'sent' : 'received'}`;
                
                let contentHtml = `
                    <div class="message-sender">${msg.sender}</div>
                    <div class="message-content">${msg.content}</div>
                    <div class="message-time">${formatTime(msg.timestamp)}</div>
                `;
                
                if (msg.type !== 'text') {
                    contentHtml += `
                        <div class="resource-card ${msg.status ? 'resource-' + msg.status : ''}">
                            <h4>${getResourceTypeName(msg.type)}资源</h4>
                            <p>${msg.description || '无描述'}</p>
                            <div class="resource-status">状态: ${getStatusText(msg.status)}</div>
                        </div>
                    `;
                }
                
                messageEl.innerHTML = contentHtml;
                messagesContainer.appendChild(messageEl);
            });
            
            // 滚动到底部
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
        
        // 清空消息
        function clearMessages() {
            document.querySelector('.messages-container').innerHTML = `
                <div class="welcome-message">
                    <h3>欢迎使用网盘资源共享社区</h3>
                    <p>请从左侧选择或搜索加入一个群组开始聊天和分享资源</p>
                </div>
            `;
            document.getElementById('currentGroupName').textContent = '请选择或加入一个群组';
            document.getElementById('groupActions').style.display = 'none';
        }
        
        // 工具函数：格式化时间
        function formatTime(date) {
            return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
        }
        
        // 工具函数：获取资源类型名称
        function getResourceTypeName(type) {
            const typeMap = {
                'baidu': '百度网盘',
                'ali': '阿里云盘',
                'other': '网盘',
                'text': '文字',
                'image': '图片',
                'audio': '音频',
                'video': '视频'
            };
            return typeMap[type] || '未知';
        }
        
        // 工具函数：获取状态文本
        function getStatusText(status) {
            const statusMap = {
                'pending': '等待审核',
                'approved': '已通过',
                'rejected': '未通过'
            };
            return statusMap[status] || '未知';
        }
        
        // 隐藏所有模态框
        function hideModals() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.style.display = 'none';
            });
        }
        
        // 初始化事件监听
        document.getElementById('showRegisterBtn').addEventListener('click', showRegisterModal);
        document.getElementById('showLoginBtn').addEventListener('click', showLoginModal);
        document.getElementById('doLoginBtn').addEventListener('click', () => {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            login(username, password);
        });
        document.getElementById('doRegisterBtn').addEventListener('click', () => {
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
            const passwordConfirm = document.getElementById('registerPasswordConfirm').value;
            
            if (password !== passwordConfirm) {
                alert('两次输入的密码不一致');
                return;
            }
            
            register(username, password);
        });
        document.getElementById('cancelCreateGroup').addEventListener('click', hideModals);
        document.getElementById('doCreateGroup').addEventListener('click', () => {
            const name = document.getElementById('groupName').value;
            const description = document.getElementById('groupDescription').value;
            createGroup(name, description);
        });
        document.getElementById('shareResourceBtn').addEventListener('click', showShareResourceModal);
        document.getElementById('cancelShareResource').addEventListener('click', hideModals);
        document.getElementById('doShareResource').addEventListener('click', () => {
            const type = document.getElementById('resourceType').value;
            const content = document.getElementById('resourceContent').value;
            const description = document.getElementById('resourceDescription').value;
            shareResource(type, content, description);
        });
        
        // 点击模态框外部关闭
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    hideModals();
                }
            });
        });
        
        // 发送消息
        document.querySelector('.send-button').addEventListener('click', sendMessage);
        document.querySelector('.message-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
        
        function sendMessage() {
            const input = document.querySelector('.message-input');
            const message = input.value.trim();
            
            if (message && currentGroup) {
                // 伪代码：实际开发中这里应该调用后端API发送消息
                console.log('发送消息:', message);
                
                // 清空输入框
                input.value = '';
                
                // 如果是搜索命令（以/搜索开头）
                if (message.startsWith('/搜索 ')) {
                    const keyword = message.substring(4);
                    searchResources(keyword);
                } else {
                    // 普通消息
                    // 模拟发送成功，添加到消息列表
                    const newMessage = {
                        id: 'new-msg',
                        sender: currentUser.username,
                        content: message,
                        timestamp: new Date(),
                        type: 'text'
                    };
                    
                    const messagesContainer = document.querySelector('.messages-container');
                    const messageEl = document.createElement('div');
                    messageEl.className = 'message sent';
                    messageEl.innerHTML = `
                        <div class="message-sender">${newMessage.sender}</div>
                        <div class="message-content">${newMessage.content}</div>
                        <div class="message-time">${formatTime(newMessage.timestamp)}</div>
                    `;
                    messagesContainer.appendChild(messageEl);
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                }
            }
        }
        
        // 搜索资源
        function searchResources(keyword) {
            // 伪代码：实际开发中这里应该调用后端API搜索资源
            console.log('搜索资源:', keyword);
            
            // 模拟搜索结果
            const results = [
                {
                    id: 'msg2',
                    sender: '用户2',
                    content: 'https://pan.baidu.com/s/example',
                    description: '前端开发教程合集',
                    timestamp: new Date(Date.now() - 1800000),
                    type: 'baidu',
                    status: 'approved'
                }
            ];
            
            // 显示搜索结果
            const messagesContainer = document.querySelector('.messages-container');
            messagesContainer.innerHTML = '<h3>搜索结果:</h3>';
            
            if (results.length > 0) {
                renderMessages(results);
            } else {
                messagesContainer.innerHTML += '<p>没有找到相关资源</p>';
            }
        }
    </script>
</body>
</html>